import { Select, SelectProps } from "@fluentui/react-components";
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";

/**
 * 赛季选择器.
 * @param props
 * @returns
 */
export const SeasonSelect = (props: Omit<SelectProps, "children">) => {
  const { data } = useQuery({
    queryKey: ["season"],
    queryFn: async () => {
      const response = await fetch(
        "https://v2.huashan.tv/api/system/dicts/suites/season",
      );
      const data = await response.json();
      return data;
    },
  });

  const items = useMemo(() => data || [], [data]);

  return (
    <Select {...props}>
      <option value={""}>=== 请选择 ===</option>
      {items.map((item: any) => (
        <option key={item.value} value={item.value}>
          {item.text}
        </option>
      ))}
    </Select>
  );
};
